<template>
    <div style="height: 100%;overflow:auto;font-size: 14px;background-color: #f5f5f5;">
      
  
      <div id="cart_pc_wrapper">
  
        <div class="main">
          <div id="cart_recommend_segment">
            <div class="_rcmd_container">
              <div class="clearfix _rcmd_title">
                <span class="_rcmd_decorate"></span>
                <span class="_rcmd_tip">商品列表</span>
              </div>
              <div class="clearfix _rcmd_area">
                <div id="_rcmd_hot">
                  <ul class="clearfix">
                    <li v-for="(item,index) in productList" :key="index" class="_rcmd_good" >
                     <a  :href="'#/productDetail/'+item.id" >
                        <div class="_rcmd_good_tumb_c">
                        <a>
                          <img :src="'api/'+item.image" class="_rcmd_good_tumb">
                        </a>
                      </div>
                      <span class="_rcmd_good_name">{{item.name}}</span>
                      <span class="_rcmd_good_price">￥{{item.price}}</span>
                    </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
  
        </div>
  
      </div>
  
    </div>
  </template>
  
  <script>
    import api from '@/api/';
    import { mapGetters } from 'vuex';
    import { removeToken } from '@/utils/auth';
    import data from '@/data/data.js';
    import router from "@/router/index.js";
    export default {
    props:["categopryid"],
      data() {
        return {

          productList:[],  
          allChecked: true,//全部选中
          totalNum: 0,
          totalPrice: 0,
          cartList:[
            {
              id:6,productName:'联想小新Pro14 2023英特尔酷睿i5 14英寸轻薄笔记本电脑 鸽子灰',
              des:'第13代智能英特尔® 酷睿™ i5-13500H/Windows 11 家庭中文版/14英寸/32GB/1T SSD/集成显卡/鸽子灰',
              price: 6299,
              checked: true,
              num: 1,
              cover:require('../../../public/img/knUF2BaGGRQat2RbPBEJYzXN4-5579.jpg'),
              imgList:[
                require('../../../public/img/XTvcWaCf29MTC2SFOSW2fV9RS-2939.jpg'),
                require('../../../public/img/QAzTExsVTx3ialBVZtALls8U4-5557.jpg'),
                require('../../../public/img/knUF2BaGGRQat2RbPBEJYzXN4-5579.jpg'),
                require('../../../public/img/W6d3BDNuaVr9PW6hu34Jz7Gfy-6568.jpg'),
                require('../../../public/img/p7dRyKcQlgtRXg3vSfvMxoh8q-9424.jpg'),
                require('../../../public/img/Q988RRMJGvzXsS4Yl0xMtfdu7-9453.jpg'),
                require('../../../public/img/f2nKZzx1OMaFiXiHYIlPjQDld-9470.jpg'),
                require('../../../public/img/SrRWO60htt9FKBXwXB2KyTaGP-9681.jpg')
              ],
              detailImgList:[//详情图片列表
                require('../../../public/img/CzI5QGjkRxyFtloNvI3kOZNiP-8477.jpg'),
                require('../../../public/img/F7pAbFtMSzEQWeOqPnnFKXbZT-3974.jpg'),
                require('../../../public/img/j9Kp8c4wTLFmHAprl6x4t55XE-9849.jpg'),
                require('../../../public/img/ByIoqf3sDqjdLpD4HOiAoCCXz-5940.jpg'),
                require('../../../public/img/n3XxKFBREGM85FD14tcKfCPXL-6896.jpg')
              ]
            },
            {
              id:7,productName:'联想小新Pro16超能本2023酷睿版 16英寸轻薄笔记本电脑 鸽子灰',
              des:'第13代智能英特尔® 酷睿™ i5-13500H/Windows 11 家庭中文版/16英寸/32GB/1T SSD/RTX 4050 6G 独显/鸽子灰',
              price: 8999,
              checked: true,
              num: 1,
              cover:require('../../../public/img/L1Fknd8OIlpPBJU7ymLhFyyg3-5615.jpg'),
              imgList:[
                require('../../../public/img/L1Fknd8OIlpPBJU7ymLhFyyg3-5615.jpg'),
                require('../../../public/img/PC2kZhfwGz83JkNLGZa6qbqDf-5601.jpg'),
                require('../../../public/img/Ad8qaOw061UhoGbIFnMPesI93-2219.jpg'),
                require('../../../public/img/sYA3doEFvG64YITTiQf26ymJa-2182.jpg'),
                require('../../../public/img/W3ag4Bha8iSqcjdF4rNgTTQdA-2211.jpg')
              ],
              detailImgList:[//详情图片列表
                require('../../../public/img/CzI5QGjkRxyFtloNvI3kOZNiP-8477.jpg'),
                require('../../../public/img/F7pAbFtMSzEQWeOqPnnFKXbZT-3974.jpg'),
                require('../../../public/img/j9Kp8c4wTLFmHAprl6x4t55XE-9849.jpg'),
                require('../../../public/img/ByIoqf3sDqjdLpD4HOiAoCCXz-5940.jpg'),
                require('../../../public/img/n3XxKFBREGM85FD14tcKfCPXL-6896.jpg')
              ]
            },
          ],
          recommendList: []
        };
      },
      computed: {
        ...mapGetters([
          'userInfo'
        ])


      },
     async mounted() {
        const categoryid=router.currentRoute.params.categopryid;
        //自己的代码
        const result=await api.get("api/goods/bycategoryid/"+categoryid,{size:90});
        this.productList=result.data;


        this.initCart();
        data.products.forEach((item) => {
          if(this.recommendList.length < 4){
            this.recommendList.push(item);
          }
        })
        //获取路由参数
        console.log(router.currentRoute.params.categopryid);
        //查询分类下商品的数据

        
      },
      methods: {
        homePage(){//首页
          this.$router.push({path:'/'});
        },
        loginPage(){//登录注册
          this.$router.push({path:'/login'});
        },
        //初始化购物车
        initCart(){
          this.total();
        },
        //统计
        total() {
          this.totalNum = 0;
          this.totalPrice = 0
          this.cartList.forEach((item) => {
            item.checked ? (this.totalNum += item.num) : (this.totalNum += 0)
            item.checked ? (this.totalPrice += item.num * item.price) : (this.totalPrice += 0);
          })
        },
        //缓存购物车
        saveCarToStorage(){
          this.total();
        },
        //删除购物车商品 - 单个
        delCartSingle(index){
          this.$confirm('确定删除?', {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            if(this.cartList.length > index){
              //删除
              this.cartList.splice(index,1);
              this.saveCarToStorage();
              this.$message.success('删除成功');
            }
          });
        },
        //删除购物车商品 - 全部
        delCartAll(){
          this.$confirm('确定删除选中的商品?', {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.cartList.forEach((item,index) => {
              if(item.checked){
                this.cartList.splice(index,1);
              }
            })
            this.$message.success('删除成功');
            this.initCart();
          });
        },
        //商品详情
        productDetail(item) {
          console.info(item);
          this.$router.push({
            path:'/productDetail',
            query:{
              id: item.id
            }
          })
        },
        //勾选商品
        selected(item){
          if (!item.checked) {
            this.allChecked = false;
          } else {
            let allChecked = true;
            this.cartList.forEach((item) => {
              if(!item.checked){
                allChecked = false;
              }
            })
            this.allChecked = allChecked;
          }
          this.total();
        },
        //全选
        selectAll(){
          if (this.allChecked) {
            this.cartList.map((item) => {
              this.checked = true;
              item.checked = true;
            })
          } else {
            this.checked = false;
            this.cartList.map((item) => {
              item.checked = false;
            })
          }
          this.total();
        },
        //商品数量减
        subNum(item){
          let num=item.num;
          if(num>1){
            num-=1
          }
          item.num=num;
          //存到缓存
          this.saveCarToStorage();
        },
        //商品数量加
        addNum(item){
          let num =item.num;
          item.num=num+1;
          //存到缓存
          this.saveCarToStorage();
        },
        //结算
        toPay() {
          let value = '';
          this.cartList.forEach((item) => {
            if(item.checked){
              if(value !== ''){
                value += '*';
              }
              value += item.id + '_' + item.num;
            }
          });
          this.$router.push({
            path:'/pay',
            query:{
              value: value
            }
          })
        },
        logoutFun(){//退出登录
          this.$confirm("确定退出登录?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.$notify({
                title: '提示',
                message: '退出成功',
                type: 'success'
                //duration: 0//为0则不会自动关闭
              });
              //清除用户信息缓存
              localStorage.removeItem("userInfo");
              this.$store.commit('SET_USER_INFO', {});
              removeToken();
              this.$router.push({path: '/login'});
            })
        }
      }
    };
  </script>
  <style scoped>
    .header {
      margin: 0 auto;
      padding-top: 0px;
      background: #f9f9f9;
      height: 50px;
      line-height: 48px;
      border-bottom: solid 1px #d2d2d2;
    }
    .user_content {
      width: 1200px;
      margin: 0 auto;
      height: 100%;
    }
    .logoContent {
      float: left;
      vertical-align: top;
    }
    a {
      text-decoration: none;
      color: #000;
    }
    a {
      text-indent: 0px;
      cursor: pointer;
    }
    .logoContent p, .logoContent img {
      display: inline-block;
    }
    .logoContent img {
      vertical-align: middle;
    }
    img {
      max-width: 100%;
      max-height: 100%;
    }
    img, fieldset, input {
      border: 0;
      outline: transparent;
    }
    .logoContent p, .logoContent img {
      display: inline-block;
    }
    .logoContent p {
      font-size: 20px;
      line-height: 48px;
    }
    ul, li, p {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .userinfo {
      float: right;
    }
    .userinfo span {
      padding: 0 5px;
      cursor: pointer;
    }
  
    #cart_pc_wrapper {
    }
    #cart_pc_wrapper {
      min-height: 85%;
    }
    #cart_pc_wrapper .main {
      width: 1200px;
      margin: 15px auto;
    }
    #cart_pc_wrapper .unlogin_wrapper {
      background: #FFF4F3;
      border-radius: 2px;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      color: #FF2F2F;
      margin-bottom: 10px;
    }
    #cart_pc_wrapper .unlogin_wrapper .unlogin_icon {
      margin-left: 34px;
      vertical-align: middle;
    }
    #cart_pc_wrapper .unlogin_wrapper .unlogin_icon i {
      font-size: 18px;
      color: #FF4948;
    }
    .iconfont {
      font-family: "iconfont" !important;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      cursor: pointer;
    }
    #cart_pc_wrapper .unlogin_wrapper .unlogin_text {
      margin-left: 4px;
      margin-right: 10px;
    }
    #cart_pc_wrapper .unlogin_wrapper button {
      width: 78px;
      height: 28px;
      line-height: 28px;
      font-size: 13px;
    }
    .le_btn_solid {
      color: #ffffff;
      background: #E1140A;
    }
    .le_btn {
      border-radius: 4px;
      cursor: pointer;
    }
    button, input, select, textarea {
      border-style: none;
    }
    button {
      outline: transparent;
      border: 0;
    }
    html, body, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, select, textarea, button, th, td {
      margin: 0;
      padding: 0;
    }
    #cart_pc_wrapper .cart_empty dl {
      padding: 132px 0 121px 345px;
    }
    .clearfix {
      zoom: 1;
    }
    ul, dl, ol, li {
      list-style: none;
    }
    .fl {
      float: left;
    }
    #cart_pc_wrapper .cart_empty dl dt img {
      width: 150px;
      height: 100px;
    }
    img {
      max-width: 100%;
      max-height: 100%;
    }
    #cart_pc_wrapper .cart_empty dl dd {
      padding-top: 22px;
    }
    ul, li, p {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #cart_pc_wrapper .cart_empty dl dd .message {
      font-size: 20px;
      color: #454545;
    }
    #cart_pc_wrapper .cart_empty dl dd .btn_group {
      margin-top: 8px;
    }
    #cart_pc_wrapper .cart_empty dl dd .btn_group .le_btn_solid {
      height: 36px;
      line-height: 36px;
      border: 1px #E1140A solid;
    }
  
    .le_btn_solid {
      color: #ffffff;
      background: #E1140A;
    }
    .le_btn {
      width: 100px;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
    }
    .le_btn_border {
      border: 1px solid #E1140A;
      color: #E1140A;
      height: 36px;
      line-height: 36px;
    }
    #container_ShippingAddress {
      position: relative;
    }
    .shipping-area-container {
      margin: 0;
      padding-left: 35px;
      height: 37px;
      color: #434242;
    }
    .clearfix:before, .clearfix:after {
      content: " ";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .shipping-area-container .business-totalgoods {
      font-size: 14px;
      font-weight: 600;
      color: #ef1e0b;
      width: 150px;
      float: left;
      line-height: 30px;
    }
    #cart_pc_wrapper .cart_wrap .cart_thead {
      padding-right: 35px;
      height: 60px;
      line-height: 60px;
      font-size: 14px;
      text-align: center;
      background: #FFFFFF;
      border-radius: 4px;
      font-weight: bold;
    }
    #cart_pc_wrapper .cart_wrap .cart_thead .t-checkbox {
      text-align: left;
      text-indent: 10px;
    }
    #cart_pc_wrapper .cart_wrap .cart_thead > div {
      float: left;
    }
    .le_width_116 {
      width: 116px;
    }
    #cart_pc_wrapper .cart_wrap .cart_thead .t-goods {
      width: 417px;
    }
    #cart_pc_wrapper .cart_wrap .cart_thead > div {
      float: left;
    }
    #cart_pc_wrapper .cart_wrap .cart_thead .t-price {
      text-align: left!important;
      text-indent: 31px;
    }
    #cart_pc_wrapper .cart_wrap .cart_thead > div {
      float: left;
    }
    .le_width_172 {
      width: 172px;
    }
    .le_width_116 {
      width: 116px;
    }
    #cart_pc_wrapper .cart_wrap .good_list .good_item {
      background: #FFFFFF;
      border-radius: 4px;
      margin-top: 6px;
    }
    #cart_pc_wrapper .cart_wrap .good_list .good_item .good_item_head_box.active {
      background: #FFF8F4;
    }
    #cart_pc_wrapper .cart_wrap .good_list .good_item .good_item_head_box {
      padding: 0 35px;
    }
    #cart_pc_wrapper .content_item {
      text-align: left;
    }
    #cart_pc_wrapper .content_item.active .good_main {
      background: #FFF8F4;
    }
    #cart_pc_wrapper .content_item .good_main {
      padding: 23px 35px 17px 35px;
    }
    #cart_pc_wrapper .i_checkbox {
      width: 16px;
      height: 16px;
      margin: 44px 12px 0 0;
    }
    #cart_pc_wrapper .i_img {
      position: relative;
    }
    #cart_pc_wrapper .i_img img {
      width: 110px;
      height: 110px;
      vertical-align: middle;
    }
    #cart_pc_wrapper .i_desc {
      width: 346px;
      text-align: left;
      padding-left: 14px;
    }
    #cart_pc_wrapper .i_desc h3 {
      font-size: 14px;
    }
    #cart_pc_wrapper .i_desc h3 a {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
    #cart_pc_wrapper .content_item .good_main .i_price {
      font-size: 14px;
    }
    .le_paddingl_31 {
      padding-left: 31px;
    }
    #cart_pc_wrapper .i_quantity {
      text-align: center;
    }
    .le_num_action {
      display: inline-block;
      border: 1px solid #E0E0E0;
      background-color: #ffffff;
    }
    ul, li, p {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .le_num_action input[type='button'] {
    }
  
    .le_num_action input:disabled {
      color: #E0E0E0;
      opacity: 1;
      -webkit-text-fill-color: #E0E0E0;
    }
    .le_num_action .reduce {
      border-right: 1px solid #E0E0E0;
    }
    .le_num_action .reduce, .le_num_action .add {
      width: 27px;
      cursor: pointer;
      font-size: 18px;
    }
    .le_num_action input {
      display: inline-block;
      text-align: center;
      height: 27px;
    }
    .le_num_action .num {
      width: 48px;
    }
    .le_num_action input {
      display: inline-block;
      text-align: center;
      color: #454545;
      height: 27px;
    }
    .le_num_action .add {
      border-left: 1px solid #E0E0E0;
    }
    button, input, select, textarea {
      background-color: transparent;
      border-style: none;
    }
    #cart_pc_wrapper .content_item .good_main .i_sum {
      font-size: 14px;
      font-weight: bold;
    }
    .le_paddingl_65 {
      padding-left: 65px;
    }
    .le_width_116 {
      width: 116px;
    }
    #cart_pc_wrapper .i_action button {
      display: block;
      margin-left: 26px;
      cursor: pointer;
      font-size: 13px;
      color: #454545;
    }
    #cart_pc_wrapper .i_desc h3 a:hover {
      color: #E1140A;
    }
    #cart_pc_wrapper .i_action button:hover {
      color: #E1140A;
    }
    #cart_pc_wrapper .cart_settlement_box {
      height: 60px;
      margin: 0 auto;
      margin-bottom: 30px;
    }
    #cart_pc_wrapper .cart_settlement {
      height: 60px;
      background: #ffffff;
    }
    #cart_pc_wrapper .cart_settlement .settlement_box {
      width: 1200px;
      margin: 0 auto;
      text-align: right;
    }
    #cart_pc_wrapper .cart_settlement .settlement_box .action {
      line-height: 60px;
      padding-left: 36px;
      font-size: 14px;
    }
    #cart_pc_wrapper .cart_settlement .settlement_box .action li.selectAll {
      cursor: pointer;
    }
    #cart_pc_wrapper .cart_settlement .settlement_box .action li {
      float: left;
      margin-right: 30px;
    }
    #cart_pc_wrapper .cart_settlement .settlement_box .action li.selectAll i {
      margin-right: 25px;
      display: inline-block;
      margin-top: -2px;
    }
    #cart_pc_wrapper .cart_settlement .settlement_box .action li {
      float: left;
      margin-right: 30px;
    }
    #cart_pc_wrapper .cart_settlement .settlement_box .action li button {
      font-size: 14px;
    }
    #cart_pc_wrapper .cart_settlement .settlement_box .action button {
      cursor: pointer;
    }
    button, input, select, textarea {
      background-color: transparent;
      border-style: none;
    }
    #cart_pc_wrapper .cart_settlement .settlement_box button.settlement {
      background: #E1140A;
      width: 195px;
      height: 60px;
      line-height: 60px;
      color: #ffffff;
      font-size: 18px;
      cursor: pointer;
    }
    #cart_pc_wrapper .cart_settlement .settlement_box .price_box {
      padding: 7px 15px 0 61px;
      font-size: 12px;
      text-align: left;
    }
    #cart_pc_wrapper .cart_settlement .price_box .sum_box span.sum {
      font-size: 22px;
      color: #E1140A;
      padding-left: 6px;
      font-weight: bold;
    }
    #cart_pc_wrapper .cart_settlement .price_box .sum {
      line-height: 28px;
    }
    #cart_pc_wrapper .cart_settlement .price_box .sum_box .ptotalsuffix {
      font-weight: bold;
    }
    .le_color_red {
      color: #E1140A;
    }
    #cart_pc_wrapper .cart_settlement .settlement_box .good_num {
      margin-top: 15px;
      height: 30px;
      line-height: 30px;
      border-right: 1px solid #E0E0E0;
      padding-right: 24px;
      font-size: 14px;
    }
    .le_color_red.ptotalcount {
      font-weight: bold;
      margin: 0 4px;
    }
    .le_color_red {
      color: #E1140A;
    }
    .fr {
      float: right;
    }
  
    #cart_pc_wrapper #cart_recommend_segment {
      width: 100%;
      margin-bottom: 14px;
    }
    #cart_pc_wrapper #cart_recommend_segment div._rcmd_container {
      background-color: #ffffff;
      border-radius: 4px;
      margin: auto;
      width: 1200px;
      display: block;
      position: relative;
    }
    #cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_title {
      font-size: 22px;
      line-height: 22px;
      width: 100%;
      padding-top: 28px;
    }
    #cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_title span._rcmd_decorate {
      margin: 9px 8px 0px 28px;
      display: block;
      float: left;
      background: #FF2F2F;
      border-radius: 2px;
      width: 3px;
      height: 22px;
    }
    #cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_title span._rcmd_tip {
      display: block;
      float: left;
      margin: 8px 0px 0px 0px;
      font-weight: 600;
    }
    #cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_area {
      width: 100%;
      background-color: #ffffff;
    }
    #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot {
      width: 90%;
      height: fit-content;
      margin: 0 auto;
    }
    #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot li._rcmd_good {
      width: 25%;
      height: 100%;
      float: left;
      padding-bottom: 44px;
    }
    #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot div._rcmd_good_tumb_c {
      padding: 15px;
    }
    #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot div._rcmd_good_tumb_c a {
      display: inline-block;
    }
    #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot img._rcmd_good_tumb {
      width: 100%;
      height: 100%;
    }
    #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span._rcmd_good_name {
      height: 40px;
      color: rgb(15, 15, 15);
      font-weight: 500;
      font-size: 13px;
      font-family: 微软雅黑;
      text-overflow: ellipsis;
      margin-bottom: 5px;
      line-height: 20px;
      padding: 0px 15px;
    }
    #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span {
      display: block;
      overflow: hidden;
    }
    #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span._rcmd_good_price {
      color: red;
      font-size: 14px;
      padding: 0px 15px 0px 15px;
    }
    #cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span {
      display: block;
      overflow: hidden;
      font-weight: 600;
    }
    #cart_pc_wrapper #cart_recommend_segment ._dsp_off {
      display: none;
    }
  </style>
  